<template>
  <a-form
      :model="formState"
      layout="inline"
  >
    <a-row style="width:100%">
      <a-col :xl="5" :lg="12" :md="12" :sm="24" :xs="24">
        <a-form-item label="站点" style="margin-bottom: 5px;">
          <a-select v-model:value="formState.site" :options="formItems[0].options"/>
        </a-form-item>
      </a-col>
      <a-col :xl="5" :lg="12" :md="12" :sm="24" :xs="24">
        <a-form-item label="平台" style="margin-bottom: 5px;">
          <a-select v-model:value="formState.platform" :options="formItems[1].options" allow-clear/>
        </a-form-item>
      </a-col>
      <a-col :xl="5" :lg="12" :md="12" :sm="24" :xs="24">
        <a-form-item label="SKU" style="margin-bottom: 5px;">
          <a-input v-model:value="formState.sku" />
        </a-form-item>
      </a-col>
      <a-col :xl="5" :lg="12" :md="12" :sm="24" :xs="24">
        <a-form-item label="类型" style="margin-bottom: 5px;">
          <a-select v-model:value="formState.skuType" :options="formItems[3].options" allow-clear/>
        </a-form-item>
      </a-col>
      <a-col :xl="2" :lg="12" :md="12" :sm="24" :xs="24">
        <a-form-item style="margin-bottom: 5px;">
          <a-button html-type="submit" type="primary" :loading="loading" style="margin-right: 10px;" @click="handleSearch">匹配库存</a-button>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
  <div class="titleTxt" style="margin-top: 20px">库存匹配</div>
  <div class="titleTxt">{{sku}}</div>
  <common-table
      :columns="columns"
      :dataSource="dataList"
      v-model:loading="loading"
      :scroll="{ x: 'max-content'}"
      :slots="['warehouseSkuList','date','inventoryType']"
  >
    <template #inventoryType="{record}">
      <div>{{record.inventoryType === 'spare' ? '散件' : '整包'}}</div>
    </template>
    <template #date="{record}">
      <div v-if="record.etaDate!== '' && record.etaDate">{{"到港：" +  record.etaDate}}</div>
      <div v-if="record.etaSellableDate!== '' && record.etaSellableDate">{{"可售：" +  record.etaSellableDate}}</div>
    </template>
    <template #warehouseSkuList="{record}">
      <div v-for="(i,index) in record.warehouseSkuList" :key="index">
        {{i.warehouseSku + '*' + i.qty}}
      </div>
    </template>
  </common-table>
  </template>
<script>
export default {
  name:'inventoryPools-candidateInventory'
}
</script>
<script setup>
import { ref,reactive } from "vue";
import CommonTable from "@/components/commonTable/index.vue";
import {getSearchAvailableInventoryPoolListBySku} from "@/api/inventoryPools/performanceReview.js";
import {getManyDictItems} from "@/api/system/dict.js";
import {message} from "ant-design-vue";
const loading = ref(false)
const dataList = ref([])
const sku = ref('')
const formState = reactive({
  site:'US',
  platform:'magento2',
  sku:'',
  skuType:'part'
})
const columns = [
  {
    title:'区域',
    dataIndex:'saleZone',
    key:'saleZone',
    align: "center",
    width:100,
  },
  {
    title:'仓库',
    dataIndex:'warehouseCode',
    key:'warehouseCode',
    align: "center",
    width:100,
  },
  {
    title:'库存池',
    dataIndex:'poolCode',
    key:'poolCode',
    align: "center",
    width:100,
  },
  {
    title:'库存类型',
    dataIndex:'inventoryType',
    key:'inventoryType',
    align: "center",
    width:100,
  },
  {
    title:'ETA',
    dataIndex:'date',
    key:'date',
    align: "center",
    width:200,
  },
  {
    title:'销售等级',
    dataIndex:'productSkuLevel',
    key:'productSkuLevel',
    align: "center",
    width:100,
  },
  {
    title:'SKU',
    dataIndex:'sku',
    key:'sku',
    align: "center",
    width:200,
  },
  {
    title:'可售数',
    dataIndex:'sellableQty',
    key:'sellableQty',
    align: "center",
    width:100,
  },
  {
    title:'剩余明细',
    dataIndex:'warehouseSkuList',
    key:'warehouseSkuList',
    align: "center",
    width:200,
  }
]
const formItems = ref([
  {
    label:'站点',
    type:'select',
    field:'site',
    options: [],
  },
  {
    label:'平台',
    type:'select',
    field:'platform',
    options: [],
  },
  {
    label:'SKU',
    type:'input',
    field:'sku',
    options: [],
  },
  {
    label:'类型',
    type:'select',
    field:'skuType',
    options: [],
  },
])
const handleSearch = async () => {
  try{
    if(formState.site === '' || formState.site === undefined){
      return message.error('请输入站点')
    }
    if(formState.platform === '' || formState.platform === undefined){
      return message.error('请输入平台')
    }
    if(formState.sku === ''){
      return message.error('请输入sku')
    }
    if(formState.skuType === '' || formState.skuType === undefined){
      return message.error('请输入类型')
    }
    loading.value = true
    const res = await getSearchAvailableInventoryPoolListBySku(formState)
    dataList.value = res.result.poolList
    sku.value = res.result.sku
  }catch (e){
    message.error(e)
  }finally {
    loading.value = false
  }
}
/**
 * 初始化字典数据
 * @returns {Promise<void>}
 */
const init = async () => {
  try{
    const res = await getManyDictItems({
      dictCodeList:"site,platforms,skuType"
    })
    formItems.value[0].options = res.result.site
    formItems.value[1].options = res.result.platforms
    formItems.value[3].options = res.result.skuType
  }catch (e){
    console.log(e)
  }
}
init()
</script>
<style scoped lang="less">
.titleTxt{
  width: fit-content;
  line-height: 33px;
  height: 33px;
  font-size: 18px;
  font-weight: 600;
}
</style>
